<template>
  <div class="movie-search-container">
    <div class="header">
      <nut-searchbar
        placeholder="搜索影片"
        v-model="searchValue"
        @search="search"
      >
        <template v-slot:rightout>
          <nut-button
            :disabled="!(searchValue.length > 0)"
            type="default"
            @click="search"
            size="small"
            @clear="clearSearch"
            @changge="searchChange"
            >搜索</nut-button
          >
        </template>
      </nut-searchbar>
    </div>
    <Select
      v-if="searchValue.length === 0"
      @onSearched="getSelectSearch"
    ></Select>
    <List
      v-if="searchValue.length && isGetData == true"
      :searchList="searchList"
    ></List>
    <nut-empty
      description="无数据"
      v-if="!searchList.length && searchValue.length && isGetData == true"
    ></nut-empty>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, watch } from "vue";
import Select from "./select.vue";
import List from "./list.vue";
import { useMovieStore } from "../../store";
import { useUserStore } from "../../store";
import * as movieApi from "../../api/movie";

const movieStore = useMovieStore();
// 获取个人信息
const userStore = useUserStore();
// userStore.getUserinfo(); //获取用户信息的
const searchValue = ref("");
const searchList = ref([]);
const isGetData = ref(false);

const search = () => {
  movieStore.add(searchValue.value);
  // searchValue.value = "";
  let data = {
    name: searchValue.value,
  };
  searchFunction(data);
};
//搜索处理函数
const searchFunction = (data) => {
  movieApi.search(data).then((res) => {
    console.log(res);
    console.log(res.filmList);
    searchList.value = res.filmList;
    isGetData.value = true;
    console.log(searchList.value);
  });
};
//从子组件select中的emit 函数
const getSelectSearch = (val) => {
  searchList.value = [];

  console.log(val, "--=-=-=-=");
  searchValue.value = val.name;
  searchFunction(val);
};
//清空搜索框
const clearSearch = () => {
  isGetData.value = false;
  searchList.value = [];
};
//输入内容的时候
const searchChange = () => {
  searchList.value = [];
  isGetData.value = false;
};
</script>
<style lang="scss">
.movie-search-container {
  display: flex;
  flex-direction: column;
}
</style>
